<template>
<div class="xpage-detail">
  <nut-cell
    class="van-hairline--bottom cell-desc-small"
    :title="state.data.name"
    :desc="state.data.updateDate"
  ></nut-cell>
  <div class="xblock-list">
    <div class="xblock-cell van-hairline--bottom">
      <div class="xblock-cell__title">
        <div>气象监测</div>
      </div>
    </div>
    <div class="xblock-content xblock-content__cell">
      <block v-for="itemchild in state.data.deviceKeysList">
        <p v-if="itemchild.type.indexOf('soil') == -1">
          <span>{{ itemchild.name }}：</span
          ><span>{{ itemchild.deviceRealData.data }}{{ itemchild.unit }}</span>
        </p>
      </block>
    </div>
  </div>
  <div class="xblock-list">
    <div class="xblock-cell van-hairline--bottom">
      <div class="xblock-cell__title">
        <div>土壤监测</div>
      </div>
    </div>
    <div class="xblock-content xblock-content__cell">
      <block v-for="itemchild in state.data.deviceKeysList">
        <p v-if="itemchild.type.indexOf('soil') >= 0">
          <span>{{ itemchild.name }}：</span
          ><span>{{ itemchild.deviceRealData.data }}{{ itemchild.unit }}</span>
        </p>
      </block>
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>
import { useLoad } from '@tarojs/taro'
import { reactive } from 'vue'
import Taro from '@tarojs/taro'
const state = reactive({
  data: {}
})
useLoad(() => {
  state.data = Taro.getStorageSync('item')
})
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
$border-radius: 6px;
$border-color: #eaeaea;
.van-hairline--bottom {
  box-shadow: none;
}
.cell-desc-small{
  box-shadow: none;
  .nut-cell__value{
    font-size: 12px;
   }
}
</style>
